<template>
	<view class="schedule-page">
		<view class="schedule-top">
			<!-- <view style="background-color: #0091EA;">
				<view class="rf-status-bar"></view>
				<view class="schedule-nav-bar">
					<view class="nav-left" @click="backClick">
						<uni-icons type="arrowleft" size="26" color="#FFFFFF"></uni-icons>
					</view>
					日程
				</view>
			</view> -->
			<view class="calendar-wrap">
				<view class="calendar-header">
					
					<view class="month-text">
						
						<image class="lastMop" @click="left_btn" src="/static/img/schedule/a_left.png" />
						{{firstDay.cYear}}年{{firstDay.cMonth}}月
						<image class="nextMop" @click="right_btn" src="/static/img/schedule/a_right.png" />
					</view>
					
					<view class="today-btn" v-show="!selDay.isToday&&!isWeekList" @click="toDayHandle">回到今天</view>
				</view>
				
				<view class="calendar-week-header active-color">
					<view class="week-item">周一</view>
					<view class="week-item">周二</view>
					<view class="week-item">周三</view>
					<view class="week-item">周四</view>
					<view class="week-item">周五</view>
					<view class="week-item">周六</view>
					<view class="week-item">周日</view>
				</view>
				<swiper class="calendar-swiper" :disable-touch="isWeekList" easing-function="linear"
				 :style="{height: isWeekList?'55px':((dRow*55)+'px')}" :current="current" circular @change="finish">
					 <swiper-item>
						<view class="calendar-day-list">
							<view class="calendar-box-bg" v-if="!isWeekList">
								<view class="calendar-box-bg-text">{{firstDay.cMonth}}</view>
							</view>
							
							<template v-for="(v, i) in lastData.list">
								<view v-if="v.cMonth == firstDay.cMonth" class="day-item" :class="{'have-border': !isWeekList && i > 6 ,'active-color': v.isAC, active: isSel(v), hide: min > i}" :key="i" @click="selDayHandle(v)">
									<view class="bg-active">
										<view class="day-text">{{v.cDay}}</view>
										<view class="daycn-text active-color">{{v.IDayCn}}</view>
										<view class="day-dot" v-if="v.dot === 1"></view>
									</view>
								</view> 
								<view v-else class="day-item" :class="{hide: min > i}" :key="i"></view>								
							</template>
						</view>
					 </swiper-item>
					 <swiper-item>
						<view class="calendar-day-list">
							<view class="calendar-box-bg" v-if="!isWeekList">
								<view class="calendar-box-bg-text">{{firstDay.cMonth}}</view>
							</view>
							<template v-for="(v, i) in dayData.list">
							
								<view v-if="v.cMonth == firstDay.cMonth" class="day-item" :class="{'have-border': !isWeekList && i > 6 ,'active-color': v.isAC, active: isSel(v), hide: min > i}" :key="i" @click="selDayHandle(v)">
									<view class="bg-active">
										<view class="day-text">{{v.cDay}}</view>
										<view class="daycn-text active-color">{{v.IDayCn}}</view>
										<view class="day-dot" v-if="v.dot === 1"></view>
									</view>
								</view>
								<view v-else class="day-item" :class="{hide: min > i}" :key="i"></view>
							</template>
						</view>
					 </swiper-item>
					 <swiper-item>
						<view class="calendar-day-list">
							<view class="calendar-box-bg" v-if="!isWeekList">
								<view class="calendar-box-bg-text">{{firstDay.cMonth}}</view>
							</view>
							
							<template v-for="(v, i) in nextData.list">
								<view v-if="v.cMonth == firstDay.cMonth" class="day-item" :class="{'have-border': !isWeekList && i > 6 ,'active-color': v.isAC, active: isSel(v), hide: min > i}" :key="i" @click="selDayHandle(v)">
									<view class="bg-active">
										<view class="day-text">{{v.cDay}}</view>
										<view class="daycn-text active-color">{{v.IDayCn}}</view>
										<view class="day-dot" v-if="v.dot === 1"></view>
									</view>
								</view>
								<view v-else class="day-item" :class="{hide: min > i}" :key="i"></view>
							</template>
						</view>
					 </swiper-item>
				</swiper>
				<view class="show-type-btn" @click="changeShowType">
					<uni-icons v-if="isWeekList" type="arrowdown" size="15" color="#cccccc"></uni-icons>
					<uni-icons v-else type="arrowup" size="15" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
<!-- 		{{selSchList}} -->
		<view class="schedule-list" >
			<view class="schedule-list-title">我的日程</view>

			<view :class="selSchList.length==1?'schedule-item one':i==0?'schedule-item first':i==(selSchList.length-1)?'schedule-item last':'schedule-item'" v-for="(v, i) in selSchList" :key="v.pkid" @click="toDetail(v.pkid)" v-if="selSchList.length>0" >
				
				<template v-if="v.status === 0">
					<!-- <view class="schedule-time" :class="{timeout: (v.status === 0 && new Date().getTime() > v.endTime)}"> -->
					<view class="schedule-time">
						<image  class="clock" @click="left_btn" src="/static/img/schedule/clock.png" />
						<template v-if="isDt(v.startTime, v.endTime)">
							<text class="starttime">{{$u.timeFormat(new Date(v.startTime), 'hh:mm')}}</text>
							<text class="endtime">- {{$u.timeFormat(new Date(v.endTime), 'hh:mm')}}</text>
						</template>
						<template v-else>
							<text class="starttime">{{$u.timeFormat(new Date(v.endTime), 'yyyy年mm月dd日')}}</text>
							<text class="endtime">截止</text>
						</template>
						
						<uni-icons class="exist-file" type="paperclip" size="20" color="#f44336" v-if="v.existFile === 1"></uni-icons>
					</view>
				</template>
				<view class="schedule-time" v-else>
					<image  class="clock" @click="left_btn" src="/static/img/schedule/clock.png"/>
					
					<text class="done-text">日程已完成</text>
					<uni-icons class="exist-file" type="paperclip" size="20" color="#f44336" v-if="v.existFile === 1"></uni-icons>
				</view>
				<view class="schedule-content">{{decodeURIComponent(v.schContent)}}</view>
				<view class="schedule-from"><text>日程来自: </text> {{v.createByName}}</view>
			</view>
			<view v-if="selSchList.length===0" class="schedule-item-c">
				暂无最新日程
			</view>
		</view>
		<uni-fab
			ref="fab"
			:pattern="pattern"
			:content="content"
			horizontal="right"
			@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script>
	import calendar from '@/common/calendar.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniFab from '@/components/uni-fab2/uni-fab.vue'
	
	export default {
		components: { uniIcons, uniFab },
		data() {
			return {
				current: 1,
				isWeekList: false,
				dayData: {list: [], firstDay: {}},
				lastData: {list: [], firstDay: {}},
				nextData: {list: [], firstDay: {}},
				firstDay: {},
				selDay: {},
				toDay: {},
				dRow: 5,
				min: 0,
				pattern: {
					color: '#7a7e83',
					backgroundColor: '#fff',
					selectedColor: '#0071C5',
					buttonColor: '#0071C5'
				},
				content: [
					{
						iconPath: '/static/img/schedule/cp0.png',
						selectedIconPath: '/static/img/schedule/cp1.png',
						text: '日程',
						active: false
					},
					// {
					// 	iconPath: '/static/img/schedule/cz0.png',
					// 	selectedIconPath: '/static/img/schedule/cz1.png',
					// 	text: '团队',
					// 	active: false
					// }
				],
				selSchList: [],
				nowSTime: 0,
				nowETime: 0
			}
		},
		onShow() {
			let _now = this.$u.timeFormat(new Date(), 'yyyy/mm/dd')
			this.nowSTime = new Date(_now + ' 00:00').getTime()
			this.nowETime = new Date(_now + ' 23:59').getTime()
			if (this.dayData.startTime) {
				if (this.current == 0) {
					this.loadData(this.lastData.startTime, this.lastData.endTime, 'lastData')
				}
				if (this.current == 1) {
					this.loadData(this.dayData.startTime, this.dayData.endTime, 'dayData')
				}
				if (this.current == 2){
					this.loadData(this.nextData.startTime, this.nextData.endTime, 'nextData')
				}
				this.selDayHandle(this.selDay)
			} else {
				this.init()
			}
		},
		methods: {
			init() {
				let _date = new Date()
				let _last_date = new Date()
				let _next_date = new Date()
	
		
				_last_date.setMonth(_last_date.getMonth() - 1)
				_next_date.setMonth(_next_date.getMonth() + 1)
				
				// console.log(_date.getMonth() === _last_date.getMonth())

				if(_date.getMonth() === _last_date.getMonth() &&_next_date.getMonth() ===(_date.getMonth() +2)){
					this.dayData = this.initDay(_date.getFullYear() + '/' + (_date.getMonth() + 1) + '/01')
					this.lastData = this.initDay(_last_date.getFullYear() + '/' + (_last_date.getMonth() ) + '/01')
					this.nextData = this.initDay(_next_date.getFullYear() + '/' + (_next_date.getMonth() ) + '/01')
						
				} else {
					this.dayData = this.initDay(_date.getFullYear() + '/' + (_date.getMonth() + 1) + '/01')
					this.lastData = this.initDay(_last_date.getFullYear() + '/' + (_last_date.getMonth() + 1) + '/01')
					this.nextData = this.initDay(_next_date.getFullYear() + '/' + (_next_date.getMonth() + 1) + '/01')
						
				}
				
			
				this.dRow = this.dayData.list.length / 7
				this.firstDay = this.dayData.firstDay
				this.loadData(this.dayData.startTime, this.dayData.endTime, 'dayData')
			},
			initDay(pDate) {
				
				const _diff = [
					{diff: 6, max: 42}, {diff: 0, max: 35}, 
					{diff: 1, max: 35}, {diff: 2, max: 35}, 
					{diff: 3, max: 35}, {diff: 4, max: 35}, 
					{diff: 5, max: 42}
				]
				let _now = new Date()
				let _date = new Date(pDate)
				
				let _week = 0
				let _day_list = []
				let _startTime = 0
				let _endTime = 0
				
				if (!this.isWeekList) {
					_date.setDate(1)
				}
				_week = _date.getDay()
				
				_date.setDate(_date.getDate() - _diff[_week].diff)
				
				_startTime = _date.getTime()
				// if(_diff[_week].diff === 1 && )
				for(let _i = 0; _i < _diff[_week].max; _i+=1) {
					let _day = calendar.solar2lunar(_date.getFullYear(), (_date.getMonth() + 1), _date.getDate())
					
					_day.isAC = (_now > _date) && !_day.isToday
					_day.index = _i
					_day.dot = 0
					_day.dayStr = this.$u.timeFormat(_date, 'yyyy-mm-dd')
					
					_day_list.push(_day)
					if(_day.isToday && (!this.toDay.index || this.toDay.index === _day.index)){
						this.selDayHandle(_day)
						this.toDay = _day
					}	
					_date.setDate(_date.getDate() + 1)
				}
				_endTime = _date.getTime() - 24*60*60*1000
				return {list: _day_list, firstDay: _day_list[_diff[_week].diff], startTime: _startTime, endTime: _endTime}
			},
			left_btn(){
				this.$nextTick(function() {
					let _obj = {
						detail:{
							current: 0
						}
					}
					if(this.current == 0){
						_obj.detail.current = 2
					}
					if(this.current == 1){
						_obj.detail.current = 0
					}
					if(this.current == 2){
						_obj.detail.current = 1
					}
					this.finish(_obj) 
				})
			},
			right_btn(){
				this.$nextTick(function() {
					let _obj = {
						detail:{
							current: 0
						}
					}
					if(this.current == 0){
						_obj.detail.current = 1
					}
					if(this.current == 1){
						_obj.detail.current = 2
					}
					if(this.current == 2){
						_obj.detail.current = 0
					}
					this.finish(_obj) 
				})
			},
			finish(e) {
				this.current = e.detail.current
				let getlnDate = (pDay) => {
					let _lastYear = pDay.cYear
					let _nextYear = pDay.cYear
					let _lastMonth = pDay.cMonth - 1
					let _nextMonth = pDay.cMonth + 1
					
					if (_lastMonth == 0) {
						_lastMonth = 12
						_lastYear = _lastYear - 1
					}
					if (_nextMonth == 13) {
						_nextMonth = 1
						_nextYear = _nextYear + 1
					}
					
					return {lastYear: _lastYear, lastMonth: _lastMonth, nextYear: _nextYear, nextMonth: _nextMonth}
				}
				let _lnDate = {}
				if (e.detail.current == 0) {
					
					if(this.lastData.list[this.lastData.list.length-1].dayStr.indexOf('-03-07')>0) {
						this.dRow = 4
					} else {
						this.dRow = this.lastData.list.length / 7
					}
					
					this.firstDay = this.lastData.firstDay
					_lnDate = getlnDate(this.firstDay)
					
					if (this.nextData.firstDay.cMonth != _lnDate.lastMonth) {
						this.nextData = this.initDay(_lnDate.lastYear + '/' + _lnDate.lastMonth + '/01')
					}
					if (this.dayData.firstDay.cMonth != _lnDate.nextMonth) {
						this.dayData = this.initDay(_lnDate.nextYear + '/' + _lnDate.nextMonth + '/01')
					}
					this.loadData(this.lastData.startTime, this.lastData.endTime, 'lastData')
				} else if (e.detail.current == 1) {
					//this.dRow = this.dayData.list.length / 7
					
					if(this.dayData.list[this.dayData.list.length-1].dayStr.indexOf('-03-07')>0) {
						this.dRow = 4
					} else {
						this.dRow = this.dayData.list.length / 7
					}
					this.firstDay = this.dayData.firstDay
					_lnDate = getlnDate(this.firstDay)
					
					if (this.lastData.firstDay.cMonth != _lnDate.lastMonth) {
						this.lastData = this.initDay(_lnDate.lastYear + '/' + _lnDate.lastMonth + '/01')
					}
					if (this.nextData.firstDay.cMonth != _lnDate.nextMonth) {
						this.nextData = this.initDay(_lnDate.nextYear + '/' + _lnDate.nextMonth + '/01')
					}
					this.loadData(this.dayData.startTime, this.dayData.endTime, 'dayData')
				} else {
					// this.dRow = this.nextData.list.length / 7
					if(this.nextData.list[this.nextData.list.length-1].dayStr.indexOf('-03-07')>0) {
						this.dRow = 4
					} else {
						this.dRow = this.nextData.list.length / 7
					}

					this.firstDay = this.nextData.firstDay
					// console.log(this.nextData.firstDay)
					_lnDate = getlnDate(this.firstDay)
					
					if (this.dayData.firstDay.cMonth != _lnDate.lastMonth) {
						this.dayData = this.initDay(_lnDate.lastYear + '/' + _lnDate.lastMonth + '/01')
					}
					if (this.lastData.firstDay.cMonth != _lnDate.nextMonth) {
						this.lastData = this.initDay(_lnDate.nextYear + '/' + _lnDate.nextMonth + '/01')
					}
					this.loadData(this.nextData.startTime, this.nextData.endTime, 'nextData')
				}
				if (this.toDay.cYear === this.firstDay.cYear && this.toDay.cMonth === this.firstDay.cMonth) {
					this.selDayHandle(this.toDay)
				} else {
					this.selDayHandle(this.firstDay)
				}
				
			},
			changeShowType() {
				
				if (!this.isWeekList) {
					// console.log('/////',this.selDay)
					this.min = this.selDay.index - (this.selDay.nWeek - 1)
				} else {
					this.min = 0
				}
				this.isWeekList = !this.isWeekList
			},
			selDayHandle(pDay) {
				this.selDay = pDay
				// 加载当天的日程列表
				this.loadDayData(pDay.dayStr)
			},
			isSel(pDay) {
				let _res = pDay.cYear === this.selDay.cYear && pDay.cMonth === this.selDay.cMonth && pDay.cDay === this.selDay.cDay
				return _res
			},
			toDayHandle() {
				// 判断是否今天在当前月
				if(this.firstDay.cMonth === this.toDay.cMonth && this.firstDay.cYear === this.toDay.cYear) {
					this.selDayHandle(this.toDay)
				} else {
					// 先初始日历到当前月再选中今天
					this.init()
					this.$nextTick(function() {
						this.current = 1
					})
				}
			},
			trigger(e) {
				this.$refs.fab.close()
				// let _option = this.selDay.isAC?'':`?syear=${this.selDay.cYear}&smonth=${this.selDay.cMonth}&sday=${this.selDay.cDay}`
				// uni.navigateTo({
				// 	url: e.index ===0?`add${_option}`:'share'
				// })
				let _option = {}
				if (!this.selDay.isAC) {
					_option = {
						syear: this.selDay.cYear,
						smonth: this.selDay.cMonth,
						sday: this.selDay.cDay
					}
				}
				this.$u.route('pages/work/apply/schedulemine/add', _option)
			},
			loadData(startDate, endDate, dayType) {
				this.$u.api.findScheduleList({startDate:startDate, endDate:endDate}).then(res => {
					let _i = 0
					for(let key in res) {
						this[dayType].list[_i].dot = res[key]
						_i += 1
					}
				}).catch(err => {
					console.log(err)
				})
					
				// });
				// findScheduleList({
				// 	startDate, endDate
				// }).then(res => {
				// 	let _i = 0
				// 	for(let key in res) {
				// 		this[dayType].list[_i].dot = res[key]
				// 		_i += 1
				// 	}
				// })
			
			},
			loadDayData(schDate) {
				console.log(schDate)
				this.$u.api.getByDate({schDate: schDate}).then(res => {
					console.log(res)
					this.selSchList = res
				}).catch(err => {
					console.log(err)
				})
				
				// helper.ajax({
				// 	url: '/api/schedule/mobile/schedule/getByDate',
				// 	method: 'post',
				// 	contentType: "application/json",
				// 	data: { schDate:schDate },
				// 	success: res => {
				// 		this.selSchList = res.data.data
				// 	}
				// });
				
				// getByDate({
				// 	schDate
				// }).then(res => {
				// 	this.selSchList = res
				// })
			},
			backClick() {
				uni.navigateBack()
			},
			showSchTime(pSTime, pETime) {
				let _res = ''
				if ((pETime - pSTime) > 24*60*60*1000) {
					_res = this.$u.timeFormat(new Date(pETime), 'yyyy年mm月dd日')
				} else {
					this.$u.timeFormat(new Date(pSTime), 'hh:mm')
				}
				return _res
			},
			toDetail(pkid) {
				this.$u.route('pages/work/apply/schedulemine/detail', {pkid: pkid})
				// uni.navigateTo({
				// 	url: `detail?pkid=${pkid}`
				// })
			},
			isDt(pS, pE) {
				let _s = this.$u.timeFormat(new Date(pS), 'yyyy-mm-dd')
				let _e = this.$u.timeFormat(new Date(pE), 'yyyy-mm-dd')
				
				return _s === _e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.schedule-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #F7F7F7;
		.schedule-top {
			box-shadow:0px 5px 10px #e0e0e0;
			color: #333333;
			background-color: #2196f3;
			background-image: linear-gradient(19deg, #ffffff 0%, #ffffff 100%);
			z-index: 100;
			.calendar-wrap {
				padding: 8px 8px 0px 8px;
				background-color: #ffffff;
				.calendar-header {
					
					position: relative;
					height: 40px;
					line-height: 40px;
					text-align: center;
					
					padding-top:0px ;
					background-color: #ffffff;
					
					.month-text {
						color: #333333;
						font-size: 21px;
						font-weight: bold;
						text {
							font-size: 15px;
						}
						.lastMop {
							margin-right:10px ;
							width:5px;
							height: 15px;
						}
						.nextMop {
							margin-left:10px ;
							width:5px;
							height: 15px;
						}
					}
					.today-btn {
						position: absolute;
						top: 6px;
						right: -8px;
						width: 63px;
						height: 25px;
						font-size: 12px;
						line-height: 25px;
						text-align: center;
						color: #B9BECA;
						border: 0px solid rgba(94,170,245,.5);
						border-radius: 20px  0 0 20px;
						background-color: #F7F8FA;
					}
				}
				.calendar-week-header {
					display: flex;
					height: 40px;
					// border-top: 1px #c0c0c0 solid;
					border-bottom: 1px #F1F3F6 solid;
					background-color: #ffffff;
					margin-bottom: 0px;
					font-size: 14px;
					.week-item {
						flex: 1;
						text-align: center;
						line-height: 45px;
						color: #999999;
					
					}
				}
				.calendar-swiper {
					height: 50px;
					transition: height 1s;
					background-color: #ffffff;
					.calendar-day-list {
						display: flex;
						flex-wrap: wrap;
						.calendar-box-bg{
							display: flex;
							-webkit-box-pack: center;
							-webkit-justify-content: center;
							justify-content: center;
							-webkit-box-align: center;
							-webkit-align-items: center;
							align-items: center;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							.calendar-box-bg-text{
								display: none;
								font-size: 200px;
								font-weight: bold;
								color: #666666;
								opacity: 0.1;
								text-align: center;
								line-height: 1;
							}
						}
						.have-border{
							// border-top: 1px #e0e0e0 solid;
						}
						.day-item {
							position: relative;
							padding-top: 5px;
							margin-bottom: 4px;
							width: 14.2%;
							text-align: center;
							height: 50px;
							line-height: 1.2;
							transition: height 1s;
							overflow: hidden;
							.day-text {
								line-height: 15px;
								padding: 4px 0px 4px 0px;
								font-size: 15px;
							}
							.daycn-text {
								font-size: 10px;
							}
							.day-dot {
								position: absolute;
								margin: 0 auto;
								right: 0px;
								left: 0;
								bottom: 0px;
								width: 2px;
								height: 2px;
								border-radius: 50%;
								//border: 1px rgba(255,255,255,.5) solid;
								background-color: #0091EA;
								
							}
						}
						.day-item.active {
							.bg-active{
								width: 85%;
								height: 44px;
								margin: 0 auto;
							}
							.day-text{
								width: 23px;
								height: 23px;
								padding-top: 5px;
								margin: 0 auto;
								font-size: 15px;
								background-color: #0071C5;
								border-radius: 50%;
								color: #ffffff;
							}
							.daycn-text{
								color: rgb(92,169,245);
								font-size: 10px;
							}
							.day-dot{
								
								background-color: #0071C5;
							}
						}
						.day-item.hide {
							height: 0;
							padding:0px;
							border-top: 0px;
							margin-bottom: 0;
						}
					}
				}
				.show-type-btn {
					padding: 3px 0;
					text-align: center;
				}
			}
		}
		
		.schedule-list {
			.schedule-list-title {
				margin: 10px 0px 10px 0px;
				font-size: 16px;
				font-weight:600;
			}
			padding:8px 15px;
			flex-grow: 1;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
			.one {
				border-radius:1em;
			}
			.first{
				border-top-left-radius:1em;
				border-top-right-radius:1em;
			}
			.last{
				border-bottom-left-radius:1em;
				border-bottom-right-radius:1em;
			}
			.schedule-item {
				// margin-bottom: 4px;
				padding: 15px 5px 5px 15px;
				border-bottom: 1px solid #eeeeee;
				
				background-color: #FFFFFF;
				.schedule-time {
					line-height: 16px;
					position: relative;
					.clock {
						margin-right: 5px;
						width: 13px;
						height: 13px;
					}
					.endtime {
						padding-left: 5px;
						color: #999999;
						font-weight: bold;
					}
					.starttime {
						font-size: 16px;
						font-weight: bold;
					}
					.done-text {
						font-size: 16px;
						color: #999999;
						font-weight: bold;
					}
					.exist-file {
						position: absolute;
						right: 0;
					}
				}
				.schedule-time.timeout::before {
					content: '已逾期';
					padding-right: 8px;
					color: #FF0000;
				}
				.schedule-content {
					padding: 2px 50px 2px 20px;
					font-size: 16px;
					line-height: 20px;
					font-weight: bold;
					word-break: break-all;
				}
				.schedule-from {
					padding: 2px 50px 2px 20px;
					color: #999999;
				}
			}
			.schedule-item:active {
				background-color: #CCCCCC;
			}
			.schedule-item-c {
				background-color: #ffffff;
				width: 100%;
				height: 50px;
				text-align: center;
				border-radius: 20px;
				display: flex;    
				justify-content:center;
				align-items:Center;
			}
		}
	}
	.active-color {
		color: #bababa;
	}
</style>
